<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treeToolsVue :tree-tools="company" :is-root="true" @addDept="addDept" />
        <el-tree :data="depts" :props="props">
          <template v-slot="{data}">          <!-- data 每一项节点数据 -->
            <treeToolsVue :tree-tools="data" @delDepts="getDepartments" @addDept="addDept" />
          </template>
        </el-tree>
      </el-card>
      <addDeptVue ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @getDepts="getDepartments" />

    </div>
  </div>
</template>

<script>
import treeToolsVue from './components/treeTools.vue'
import { getDepartments } from '@/api/departments'
import { listTree } from '@/utils'
import addDeptVue from './components/add-dept.vue'
export default {
  components: {
    treeToolsVue,
    addDeptVue
  },
  data() {
    return {
      company: {},
      depts: [],
      props: {
        label: 'name'
      },
      showDialog: false,
      node: null
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const res = await getDepartments()
      this.company = { name: res.companyName, manager: res.companyManage || '负责人', id: '' }
      this.depts = listTree(res.depts, '')
    },
    addDept(node, command) {
      this.showDialog = true
      this.node = node
      if (command === 'edit') {
        this.$refs.addDept.getDepartDetail(node.id)
        // this.$nextTick(() => {
        //   this.$refs.addDept.getDepartDetail()
        // })
      }
    }

  }
}
</script>

<style>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}

</style>
